<template>
  <div>
    <comment-header>看涂鸦</comment-header>
    <div v-for="(item,index) in contentList" :key="index">
      <!-- <router-link to="/scrawlin"> -->
      <div class="bigBox" @click="gotoScrawlIn(item)">
        <img :src="item.picture" alt>
        <div class="lucency"></div>
        <div class="smallBox">
          <div>
            <img class="smallHead" :src="item.user.avatar" alt>
          </div>
          <div class="picture_list_block_img_info_time">
            <div v-text="item.user.nick" style="font-size:5vw;color:#ff5656;margin-bottom:2vw;"></div>
            <i style="margin-left:4vw;" class="iconfont font_ico_db"></i>&nbsp;
            <span v-text="item.user.create_time"></span>
          </div>
        </div>
      </div>
      <!-- </router-link> -->
      <div class="boxBottom">
        <div class="boxBottom_conten">
          <div>
            <i></i>
            <span v-text="item.like_num+' 喜欢'"></span>
          </div>
          <div>
            <i></i>
            <span v-text="item.comment_num+' 评论'"></span>
          </div>
        </div>
      </div>
    </div>
    <p v-show="status=='loading'">正在加载</p>
  </div>
</template>
<script>
import commentHeader from "../../components/comment/commentHeader";
export default {
  components: {
    commentHeader
  },
  data: function() {
    return {
      pagesize: 5,
      page: 1,
      contentList: [],
      status: "fail",
      loadingMore: false
    };
  },
  mounted() {
    this.scrawlContent();

    function addEvent(obj, eventStr, callback) {
      if (obj.addEventListener) {
        // 大部分浏览兼容的方式
        obj.addEventListener(eventStr, callback, false);
      } else {
        // this是谁由调用方式 决定
        // callback.call(obj)
        // IE8及以下
        obj.attachEvent("on" + eventStr, function() {
          // 在匿名函数中调用回调函数
          callback.call(obj);
        });
      }
    }
    var _this = this;
    addEvent(window, "scroll", _this.didscroll);
  },
  methods: {
    gotoScrawlIn(value){
      this.$router.push({path:'/scrawlin'});
      window.localStorage.setItem("scrawlItem",JSON.stringify(value));
    },
    scrawlContent: function() {
      var that = this;
      this.$http
        .get(
          "/pet/v2/petalbumrecommendlist?pagesize=" +
            this.pagesize +
            "&page=" +
            this.page
        )
        .then(
          function(data) {
            console.log(data);
            that.contentList = data.body.data.list;
            that.status = "success";
          },
          function() {
            that.status = "fail";
          }
        );
    },

    // 滚动事件
    didscroll() {
      // 当前页面的滚动距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 获取内容高度
      var contentHeight = document.body.clientHeight;
      // 获取窗口的高度
      var screenHeight = window.innerHeight;
      if (scrollTop + screenHeight > contentHeight - 60) {
        if (this.loadingMore == false) {
          this.loadMore();
        }
      }
    },
    loadMore() {
      this.status = "loading";
      this.loadingMore = true;
      this.page += 1;

      var that = this;
      this.$http
        .get(
          "/pet/v2/petalbumrecommendlist?pagesize=" +
            this.pagesize +
            "&page=" +
            this.page
        )
        .then(
          function(data) {
            that.contentList = that.contentList.concat(data.body.data.list);
            that.status = "success";
            that.loadingMore = false;
            console.log(that.contentList);
          },
          function() {
            that.status = "fail";
          }
        );
    }
  }
};
</script>
<style scoped>
img {
  vertical-align: bottom;
}
.bigBox {
  position: relative;
}
.bigBox > img {
  width: 100vw;
  height: 100vw;
}
.smallHead {
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
}
.smallBox {
  position: absolute;
  left: 6vw;
  bottom: 3vw;
  display: flex;
  justify-content: space-around;
  z-index: 2;
}
.lucency {
  background: url("../../../static/image/flshadow.png") bottom no-repeat;
  position: absolute;
  bottom: 0;
  z-index: 1;
  height: 70%;
  width: 100%;
  background-size: 100%;
}
.boxBottom {
  height: 15vw;
  background-color: white;
}
.boxBottom_conten {
  float: left;
  padding-top: 2vw;
  padding-left: 8vw;
  display: flex;
  font-size: 4vw;
}
.boxBottom_conten i {
  margin-right: 1vw;
}
.boxBottom_conten span {
  margin-right: 3vw;
}
</style>